<template>
	<view>
		<!-- 排序筛选 -->
		<view class="d-flex border-top border-bottom a-center" style="height: 100upx;">
			<view class="flex-1 d-flex a-center j-center font-md"
			v-for="(item, index) in screen.list" :key="index"
			@tap="changeScreen(index)">
				<text :class="screen.currentIndex === index ? 'main-text-color' : ''"
				>{{item.name}}</text>
				<view>
					<view class="iconfont icon-paixu-shengxu line-h0 "
					:class="item.status === 1 ? 'main-text-color' :'text-light-muted'"></view>
					<view class="iconfont icon-paixu-jiangxu line-h0"
					:class="item.status === 2 ? 'main-text-color' :'text-light-muted'"></view>
				</view>
			</view>
			
			<view class="flex-1 d-flex a-center j-center font-md">
				<view @tap="show" class="main-text-color">筛选</view>
			</view>
		</view>
		
		<!-- 抽屉 -->
		<uni-drawer :width="300" ref="draw" :visible="showRight" mode="right" @close="hide">
			<card title="服务" :headBorderBottom="false">
				<!-- 单选按钮组 -->
				<zcm-radio-group :label="label" @change="changeRadio"></zcm-radio-group>
				
			</card>
			<!-- 下面两个按钮 -->
			<view class="d-flex position-fixed bottom-0 right-0 w-100 a-center j-center border-top border-dark">
				<view class="flex-1 font-md py-2 text-center"
				hover-class="bg-light-secondary">重置</view>
				<view class="flex-1 main-bg-color text-white font-md py-2 text-center"
				hover-class="main-bg-hover-color">确定</view>
			</view>
		</uni-drawer>
		
		<!-- 列表 -->
		<block v-for="(item, index) in list" :key="index">
			<search-list :item="item" :index="index"></search-list>
		</block>
		
	</view>
</template>

<script>
	import uniDrawer from "@/components/uni-ui/uni-drawer/uni-drawer.vue"
	import card from "@/components/common/card.vue"
	import zcmRadioGroup from "@/components/common/radio-group.vue"
	import price from "@/components/common/price.vue"
	import searchList from "@/components/search-list/search-list.vue"
	
	export default {
		components: {
			uniDrawer,
			card,
			zcmRadioGroup,
			price,
			searchList,
		},
		
		data() {
			return {
				list: [
					{
						title: "真无限蓝牙耳机",
						img: "../../static/images/demo/demo6.jpg",
						desc: "雅致简约 / 分体式入耳 / 收纳盒充电 / 蓝牙5.0 /触控操作",
						pprice: 100,
						comment_num: 1294,
						good_num: "98.4%"
					},
					{
						title: "真无限蓝牙耳机",
						img: "../../static/images/demo/demo6.jpg",
						desc: "雅致简约 / 分体式入耳 / 收纳盒充电 / 蓝牙5.0 /触控操作",
						pprice: 100,
						comment_num: 1294,
						good_num: "98.4%"
					},
					{
						title: "真无限蓝牙耳机",
						img: "../../static/images/demo/demo6.jpg",
						desc: "雅致简约 / 分体式入耳 / 收纳盒充电 / 蓝牙5.0 /触控操作",
						pprice: 100,
						comment_num: 1294,
						good_num: "98.4%"
					}
				],
				showRight: false,
				screen: {
					currentIndex:0,
					list:[
						{name:'综合', status: 1},
						{name:'销量', status: 0},
						{name:'价格', status: 0}
					]
				},
				label: {
					selected: 0,
					list:[
						{name:"选项一"},
						{name:"选项二"},
						{name:"选项三"},
					]
				}
			}
		},
		methods: {
			changeScreen(index) {
				let oldIndex = this.screen.currentIndex
				let oldItem = this.screen.list[oldIndex]
				if (oldIndex === index) {
					if (oldItem.status === 1) {
						oldItem.status = 2
					} else if (oldItem.status === 2) {
						oldItem.status = 1
					}
					return 
				}
				//移除旧的激活状态
				let newItem = this.screen.list[index]
				oldItem.status = 0
				this.screen.currentIndex = index
				//增加新的激活状态
				newItem.status = 1
			},
			show(){
				this.$refs.draw.open();
			},
			hide(){
				this.$refs.draw.close();
			},
			changeRadio(index) {
				this.label.selected = index
			}
		}
	}
</script>

<style>

</style>
